<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" inline="true" ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select  size="mini" style="width: 200px" @change="schoolchange" v-model="formData.schoolid" placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select  size="mini" style="width: 200px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.usertype" placeholder="请选择类别">
                        <el-option
                            v-for="item in onusertypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.periodid" placeholder="请选择上课时间">
                        <el-option
                            v-for="item in periodList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.year" placeholder="请选择年份">
                        <el-option
                            v-for="item in yearsList"
                            :key="item.id"
                            :label="item.id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.month" placeholder="请选择月份">
                        <el-option
                            v-for="item in monthsList"
                            :key="item.id"
                            :label="item.id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.week" placeholder="请选择周数">
                        <el-option
                            v-for="item in weeksList"
                            :key="item.id"
                            :label="item.id"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input size="mini" style="width: 200px" v-model="formData.subject" placeholder="本周课题">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="search" size="mini" icon="el-icon-search">搜索</el-button>
        </el-form>
        <div id="printarea" class="printclass">
        <div class=""  style="">
            <el-table
                :data="tableData"
                :spanMethod="objectSpanMethod"
                >
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="5%">
                </el-table-column>
                <el-table-column
                    property="username"
                    label="学生姓名"
                    min-width="8%">
                </el-table-column>
                <el-table-column
                    property="remainclass"
                    label="余课参考"
                    min-width="8%">
                </el-table-column>
                <el-table-column
                    property="shouldDay"
                    label="上课时间"
                    :formatter="dateFormat"
                    min-width="13%">
                </el-table-column>
                <el-table-column
                    property="kaoqin"
                    label="考勤"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="jiazhang"
                    label="家长签字"
                    min-width="10%">
                </el-table-column>
                <!--<el-table-column
                    property="comments"
                    label="备注"
                    min-width="10%">
                </el-table-column>-->
            </el-table>
        </div>
        </div>
        <div>
            <el-button @click="this.preview">预览并打印周考勤表</el-button>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import * as moment from 'moment';
    import { weekCheckWorkPrint} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";

    export default {
        data() {
            return {
                formData:{
                    schooid:'',
                    eid:'',
                    usertype:'',
                    periodid:'',
                    year:'',
                    month:'',
                    week:'',
                    subject:'',
                    pageno:1,
                    pagesize:10,
                },
                empsList:[],
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        },
        computed: {
            ...mapGetters(['schoolList', 'usertypeList', 'periodList', 'empschoolMap', 'onusertypeList','yearsList','monthsList','weeksList'])
        },
        components: {
            headTop,
        },
        created() {
        },
        mounted() {
            this.initQueryParam();
            if (this.periodList==null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
            this.initData();
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            initQueryParam(){
                var y=moment().format('YYYY');
                var m=moment().format('M');
                var w=moment().format("E");
                this.formData.year=y;
                this.formData.month=m;
                this.formData.week=w;



            },
            preview(){
                let prnhtml = document.getElementById('printarea').innerHTML;
               // alert(prnhtml);
                window.document.body.innerHTML = prnhtml;
                window.print();

            },

            dateFormat:function(row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD HH:mm");
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                var rowscount=this.count;
                if (columnIndex == 6) {
                    return {
                        rowspan: rowscount+2,
                        colspan: 1
                    };
                }
                if (rowIndex>=this.count) {
                    return {
                        rowspan: 1,
                        colspan: 6
                    };
                }
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            search(){
              this.initData();
            },
            async initData() {
                const v = await weekCheckWorkPrint({"data":this.formData});
                this.tableData = [];
                var list=v.data;
                this.count=list.length;
                list.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.username = item.username;
                    tableData.type = item.type;
                    tableData.remainclass=item.remainclass;
                    tableData.endTime=item.endTime;
                    tableData.shouldDay=item.shouldDay;
                    this.tableData.push(tableData);
                });
                this.tableData.push({ id:'备注： 剩余课时为参考值，课时以交费截止日期为准。缺课请在课时截止日期前补课完毕。'});
                this.tableData.push({id:'上课√ 请假或缺课× 上课人数：___________缺课人数：___________助教：               检查:'})
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getUsers()
            },
            async getUsers() {
                const Users = await getUserList({offset: this.offset, limit: this.limit});
                this.tableData = [];
                Users.forEach(item => {
                    const tableData = {};
                    tableData.username = item.username;
                    tableData.registe_time = item.registe_time;
                    tableData.city = item.city;
                    this.tableData.push(tableData);
                })
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
    .printclass {
        width:660px;
        margin-left: 20px;
        margin-top: 50px;
        padding-right: 20px;
    }
    .printtext {
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        border: none;
        font-family: "Microsoft Yahei", sans-serif;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
    }
</style>
